<template>
  <q-page>
    <q-inner-loading visible v-if="loading">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
      <b class="text-primary">数据加载中...</b>
    </q-inner-loading>
    <my-event-toolbar v-model="model" />

    <div class="q-ma-lg" v-if="alert">尚未添加任何中奖用户</div>

    <div class="row gutter-sm" :style="$q.platform.is.desktop?'padding:8px;':''">

      <!-- base content -->
      <div class="col-xs-12 col-md-6">
        <!--
        <my-event-info v-model="model" v-if="model.id!=0&&!loading" />
        -->
        
        <!-- rating summary -->
        <q-list separator class="q-py-none" v-if="model.id!=0&&list.length>0">
          <q-list-header class="row">
            <div class="col">评分详情</div>
            <div class="col-auto">
              <q-btn dense outline label="分享" color="primary" icon="share" 
                  @click="$router.push('/share?mgroup='+model.movieId)" />
            </div>
          </q-list-header>
          <q-item>
            <q-item-side icon="mdi-counter" />
            <q-item-main label>评分人数</q-item-main>
            <q-item-side right>
              <b class="text-primary">{{model.ratingCount}}人</b> 
              <small v-if="model.reviewCount>0">(长评：{{model.reviewCount}}人)</small>
            </q-item-side>
          </q-item>
          <q-item>
            <q-item-side icon="mdi-numeric" />
            <q-item-main label>评论均分</q-item-main>
            <q-item-side right color="primary">{{model.score}}</q-item-side>
            <q-item-side right><q-btn dense label="刷新评分" color="primary" 
                  @click="refreshRating" :loading="refresh" /></q-item-side>
          </q-item>
          <q-item v-for="(v,idx) in ['五','四','三','二','一']" :key="'bar'+idx">
            <q-item-side :icon="'mdi-numeric-'+(5-idx)+'-box-outline'" />
            <q-item-main label>{{v}}星:{{model.stars[idx]}}人
              <q-item-tile class="float-right">{{model.starsRate[idx]}}%</q-item-tile>
            </q-item-main>
            <q-item-side right style="width:100px">
              <q-progress stripe animate :percentage="model.starsRate[idx]" height="10px" />
            </q-item-side>
          </q-item>
        </q-list>
      </div>

      <!-- rating list -->
      <div class="col-xs-12 col-md-6" v-if="model.id!=0&&list.length>0">
        <q-list separator dense class="q-py-none" :no-border="$q.platform.is.mobile" >
          <q-list-header class="row">
            <div class="col">
              评分用户: <b class="text-primary">{{model.ratingCount}}</b>人
              <br />
              <span>粉丝总数: <b>{{totalFollowers}}</b>人</span>
            </div>
            <div class="col-auto">
              <q-btn class="q-mx-sm" dense label="下载催分表" outline color="secondary" 
                  @click="downloadNotRated" />
              <q-btn dense label="下载评分表" color="primary" 
                  @click="downloadRated" />
            </div>
          </q-list-header>
          <q-item style="padding:0;">
            <q-search icon="mdi-account-search" class="full-width no-shadow" :value="filter" 
                inverted-light color="grey-2"
              placeholder="按用户昵称or数字0~5过滤用户评分" autofocus="true"
              @input="filterUser" @clear="filterUser('')" clearable/>
          </q-item>
          <template v-for="(item,idx) in filteredList">
            <!-- norating -->
            <q-item :key="'norating_'+item.id+idx"  v-if="item.rating<=0">
              <q-item-main label>
                <a :href="'https://movie.douban.com/people/'+item.id+'/collect'" target="_blank">{{item.name}}</a>
              </q-item-main>
              <q-item-side right v-if="isWx">
                <q-btn icon="phone" outline dense label="电话" color="primary" class="q-mr-sm q-px-sm"
                  @click="makeCall(item.phone)"/>
              </q-item-side>
              <q-item-side right>未评分</q-item-side>
            </q-item>
            <!-- hasrating -->
            <q-collapsible :key="'rating_'+item.id+idx" v-if="item.rating>0">
              <template slot="header">
                <q-item-main label>
                  <a :href="'https://movie.douban.com/people/'+item.id+(item.hasReview?'/reviews':'/collect')" target="_blank">{{item.name}}</a>
                </q-item-main>
                <q-item-side right>
                  <small v-if="item.hasReview" class="text-primary">(长评)</small>
                  <q-rating readonly icon="mdi-star" color="primary" v-model="item.rating" :max="item.rating" />
                  <q-icon v-if="item.judge>0" name="thumb_up" color="primary" />
                  <q-icon v-if="item.judge<0" name="thumb_down" color="black" />
                </q-item-side>
              </template>
              <div class="text-right">
                <q-btn v-if="isWx" icon="phone" outline dense label="电话" color="primary" class="q-mr-sm q-px-sm"
                  @click="makeCall(item.phone)"/>
                <q-btn outline dense label="踩踩踩" color="black" class="q-mr-sm q-px-sm"
                  @click="blackPlayer(item)"/>
                <q-btn v-if="item.rating>=3" outline dense label="点赞！" color="primary" class="q-mr-sm q-px-sm"
                  @click="favPlayerComment(item)"/>
              </div>
              <div>{{item.comment}}</div>
            </q-collapsible>
          </template>
        </q-list>
      </div>
    </div>
  </q-page>
</template>

<style>
</style>

<script>
import MyEventToolbar from "../components/MyEventToolbar.vue";
import MyEventInfo from "../components/MyEventInfo.vue";

export default {
  name: 'PageEventGroupSummary',
  components: { MyEventToolbar, MyEventInfo },
  data () {
    return {
      isWx: false,
      filter: '',
      alert: false,
      loading: true,
      refresh: false,
      model: {
        step: 0,
        name: '',
        id: 0,
        days: 0,
        date: '',
        time: '',
        place: '',
        city: '',
        movieId: 0,
        movieName: '',
        userCount: 0,
        hasExcel: false,
        ratingCount: 0,
        stars: [0,0,0,0,0],
        starsRate: [0,0,0,0,0],
        score: ''
      },
      list:[]
    }
  },
  mounted() {    
    let me = this;
    this.loadEventPlay();
    this.refreshPlayers();
    this.$api.ui.pageBackBtn = function(){
      me.$router.go(-1);
    }
    this.isWx = this.$api.wx.isWx();
  },
  methods: {
    makeCall(number) {   
      this.$api.wx.makeCall(number);
    },
    blackPlayer(user) {
      let me = this;
      let eventId = me.$route.params.id;

      user.checked = -1;
      me.model.ratingCount--;
      if(user.hasReview) {
        me.model.reviewCount--;
      }

      me.$api.party.restorePlayer(eventId, user, res=>{
        let cause = me.model.movieName + '恶意评论';
        me.$api.party.judgeComment(eventId, user, false, res=>{user.judge = -1});
        me.$api.party.blackPlayer(eventId, user, cause, 10000, res=>{
          me.loadEventPlay();
        });
      });
    },
    favPlayerComment(user) {
      let me = this;
      let eventId = me.$route.params.id;
      me.$api.party.judgeComment(eventId, user, true, res=>{
        user.judge = 1
      });
    },
    refreshRating() {
      let me = this;
      let movieId = me.$route.params.id;
      me.refresh = true;
      this.$api.party.refreshRating(0-movieId, res=>{
        me.loadEventPlay();
        me.refreshPlayers();
        me.refresh = false;
        me.$q.notify({ message: '评分刷新成功', type: 'positive' });   
      }, err=>{
        me.refresh = false;
      });
    },

    refreshPlayers() {
      let me = this;
      let movieId = me.$route.params.id;
      me.loading = true;
      this.$api.party.loadGroupEventCheckers(movieId, res=>{
        me.list = res.data.model;
        me.alert = (me.list.length == 0);
        me.loading = false;
      });
    },

    filterUser(val) {
      this.filter = val;
    },

    loadEventPlay() {
      let me = this;
      let movieId = me.$route.params.id;
      this.$api.party.loadGroupEvent(movieId, res=>{
        me.model = res.data.model;
        me.$api.ui.pageTitle = me.model.place + '：《' + me.model.movieName + '》';
      });
    },

    downloadRated() {
      let filename = this._generateFileName('评分表');
      this.$api.party.downloadExcelRated(this.model.id, filename);
    },

    downloadNotRated() {
      let filename = this._generateFileName('催分表');
      this.$api.party.downloadExcelNotRated(this.model.id, filename);
    },

    _generateFileName(type) {
      var model = this.model;
      return model.date.replace('-', '').replace('-','') + '_' 
                        + model.city + '_' 
                        + model.movieName + '_'
                        + type 
                        +'.xls';
    }
  },
  computed: {
    totalFollowers() {
      if(this.list.length == 0) {
        return 0;
      }
      let total = 0
      for(let i = 0; i < this.list.length; i++) {
        if(this.list[i].rating > 0) {
          total += this.list[i].followers;
        }
      }
      return total;
    },
    filteredList() {
      let query = this.filter.toLowerCase();
      return this.list.filter(function (user) {
        if(query.length>0) {
          let num = (query - 0);
          if(num >= 0 && num <= 5) {
            return user.rating == num;
          }
          let text = user.rating + '星' + user.name.toLowerCase() + (user.hasReview?'长评影评':(user.rating>0?'短评':''));
          if(text.indexOf(query)>=0) {
            return true;
          }       
          return false;
        }
        return true;
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
footer 
  display none
</style>

